"use client"

import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { useLanguage } from "@/context/language-context"

export function HeroSection() {
  const { dictionary } = useLanguage()

  return (
    <section className="relative w-full h-[60vh] md:h-[80vh] flex items-center justify-center text-center bg-gradient-to-r from-pink-100 to-purple-100 dark:from-gray-900 dark:to-gray-800 overflow-hidden">
      <Image
        src="/placeholder.svg?height=1080&width=1920"
        alt="Jewelry background"
        width={1920}
        height={1080}
        className="absolute inset-0 w-full h-full object-cover opacity-30 dark:opacity-10"
        priority
      />
      <div className="relative z-10 px-4 md:px-6 max-w-3xl space-y-4">
        <h1 className="text-4xl md:text-6xl font-bold tracking-tight text-gray-900 dark:text-gray-50">
          {dictionary.heroTitle}
        </h1>
        <p className="text-lg md:text-xl text-gray-700 dark:text-gray-300">{dictionary.heroDescription}</p>
        <Button
          asChild
          className="mt-6 bg-black text-white hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-200"
        >
          <Link href="/products">{dictionary.shopNow}</Link>
        </Button>
      </div>
    </section>
  )
}
